<template>
  <div class="bg-stone-200 mb-4 relative rounded flex items-center px-2 py-1.5 text-sm">
    <Search class="mr-2" :size="16" />
    <input
      @focus="openCommandMenu"
      type="text"
      placeholder="Search"
      class="w-full bg-transparent placeholder:text-stone-400 focus:outline-none"
    />
    <span class="p-1 text-xs flex gap-0.5 items-center shadow bg-stone-50 rounded absolute right-1.5 top-1/2 -translate-y-1/2">
      <Command :size="16" />K
    </span>
  </div>
  <!-- CommandMenu component will be added here -->
  <!-- <CommandMenu :open="isCommandMenuOpen" @update:open="isCommandMenuOpen = $event" /> -->
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Search, Command } from 'lucide-vue-next';
// import CommandMenu from './CommandMenu.vue'; // Import CommandMenu later

const isCommandMenuOpen = ref(false);

const openCommandMenu = (event: FocusEvent) => {
  (event.target as HTMLInputElement).blur();
  isCommandMenuOpen.value = true;
};
</script>

<style scoped>
/* Styles for Search */
</style>